import React, { Component } from 'react';
import { Form, Button, Input, Row, Col, message } from 'antd';
import styles from './EditInfo.css'

const FormItem = Form.Item;


export default class EditInfo extends Component {

    constructor(props) {
        super();
        this.state = {
            timer: 60,
            buttonText: '获取验证码',
            flag:false
        }
    }
    handleSubmit = (msg) => {
        this.props.form.validateFields(
            (err, value) => {
                if (!err) {
                    console.log('success');
                    msg = {
                        flag: true,
                        valueData: value
                    }
                    if (this.state.flag) {
                        this.props.transferMsg(msg);
                        console.log(value)
                    } else {
                        message.warning('请输入6位有效的手机验证码')
                    }
                }
            }
        )
    }

    handleGetCode = (event) => {
        const _Error = this.props.form.getFieldError('phoneNumber'),
            _Value = this.props.form.getFieldValue('phoneNumber');
        let s = this.state.timer;

        this.setState({ flag: false });
        //console.log(this.props.form.getFieldError('phoneNumber')) // 获取指定控件error值 (错误时可以打出错误提示信息 反之 undefined)
        //console.log(this.props.form.getFieldValue('phoneNumber')) // 获取指定控件输入值 (value)
        if (_Error === undefined && _Value === undefined) {
            message.warning('请输入手机号码')
        } else if (_Error !== undefined) {
            message.warning('请输入11位有效的手机号码')
        } else {
            message.success('验证码已发送至您的手机，请注意查收！');
            // 定时任务  修改获取验证码文本  防止恶意发送获取验证码请求
            this.setState({ flag: true });
            setInterval((e) => {
                s--;
                this.setState({
                    timer: s,
                    buttonText: s + '秒后可再获取验证码',
                    disabled: true
                });
                if (s < 0) {
                    this.setState({
                        timer: 60,
                        buttonText: '获取验证码',
                        disabled: false
                    });
                    return false;
                }
            }, 1000);
        }
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },

        };
        return (
            <div className={styles.container}>
                <p className={styles.title}>基本信息填写：</p>
                <Form onSubmit={this.handleSubmit} className={styles.from}>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="手机号"
                                    hasFeedback
                                >
                                    {getFieldDecorator('phoneNumber', {
                                        rules: [
                                            { required: true, message: '请输入手机号码！' },
                                            { pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: '请输入11位有效的手机号码！' }
                                        ],
                                        validateFirst: true,
                                        // initialValue: '15208263389'
                                    })(
                                        <Input placeholder="请输入手机号码" maxLength='11' />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="验证码"
                                    hasFeedback
                                >
                                    {getFieldDecorator('code', {
                                        rules: [
                                            { required: true, message: '请输入手机验证码!' },
                                            { pattern: /^[a-zA-Z0-9]{6}$/, message: '请输入有效的验证码！' }
                                        ],
                                        validateFirst: true,
                                        // initialValue: '888888'
                                    })(
                                        <Input placeholder="请输入手机验证码" maxLength='6' />

                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className={styles.button}>
                                <Button disabled={this.state.disabled} onClick={this.handleGetCode}>{this.state.buttonText}</Button>
                            </Col>
                        </Row>
                    </div>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="邮编"
                                    hasFeedback
                                >
                                    {getFieldDecorator('postcode', {
                                        rules: [
                                            { required: true, message: '请输入居住地邮编！' },
                                            { pattern: /^[1-9][0-9]{5}$/, message: '请输入有效的邮编！' }
                                        ],
                                        validateFirst: true,
                                        // initialValue: '888888'
                                    })(
                                        <Input placeholder="请输入邮编！" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="职业"
                                >
                                    {getFieldDecorator('position', {
                                        rules: [
                                            { required: false, message: '请输入职位！' },
                                        ],
                                        validateFirst: true
                                    })(
                                        <Input placeholder="请输入职位！" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div className="inputItem lastItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="联系地址"
                                    hasFeedback
                                    extra={'如：新疆省阿克苏市xx路xxx小区xx号楼xx单元201室。'}
                                >
                                    {getFieldDecorator('location', {
                                        rules: [
                                            { required: true, message: '请输入联系地址！' },
                                        ],
                                        validateFirst: true,
                                        // initialValue: '新疆省阿克苏市xx路xxx小区xx号楼xx单元201室'
                                    })(
                                        <Input placeholder="请输入联系地址！" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                </Form>
            </div>
        );
    }
}
EditInfo = Form.create({})(EditInfo);